<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>分析按键</title>

    <script src="/s/js/lib/jquery.min.js"></script>
    <script src="/s/js/lib/echarts.min.js"></script>

    <script src="/s/js/chart.js"></script>
    <link rel="stylesheet" href="/s/css/common.css">

    <style>
        .line-chart {
            width: 100%;
            height: 900px;
            top: 2px;
            overflow: hidden;
        }

        .heatmap-chart {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="nav">
    向前偏移X天，绘制天数Y的图表 (键：将每天的最多键并集运算得到最终参与展示的键值)<br>

    <button onclick="setWeek()">周</button>
    <button onclick="setMonth()">月</button>
    <button onclick="setYear()">年</button>

    <label for="period">天数:</label>
    <input id="period" value="7" type="number" min="0"/>

    <label for="offset">偏移: </label>
    <input id="offset" value="6" type="number" min="0"/>

    <label for="top">top:</label>
    <input id="top" value="10" type="number" min="1"/>

    <label for="showLabel">Label:</label><input id="showLabel" type="checkbox">
    <label>HideZero:</label><input id="hideZero" type="checkbox">

    <button onclick="lineChart()">折线图</button>
    <button onclick="barChart()">柱状图</button>
    <button onclick="heatmapChart()">热力图</button>
    <button onclick="syncDetails()">存入LevelDB</button>

    <button onclick="window.location='/s/weeks.html'">每周热力图</button>
    <button onclick="window.location='/s/calendar.html'">年视图</button>
</div>

<div id="main" class="line-chart"></div>

<script type="text/javascript">
    let lastChart = null

    function setYear() {
        $("#period").val(365);
        $("#offset").val(364);
    }

    function setMonth() {
        $("#period").val(30);
        $("#offset").val(29);
    }

    function setWeek() {
        $("#period").val(7);
        $("#offset").val(6);
    }

    function buildQueryStr() {
        let period = $("#period").val();
        let offset = $("#offset").val();
        let top = $("#top").val();
        let showLabel = $("#showLabel").prop("checked");
        let hideZero = $("#hideZero").prop("checked");

        return '?length=' + period + '&offset=' + offset + '&top=' + top + "&showLabel=" + showLabel + "&hideZero=" + hideZero;
    }

    function barChart() {
        let queryStr = buildQueryStr() + "&type=bar";
        let url = '/lineMap' + queryStr
        barChartApi(url, 'main')
    }

    function barChartApi(url, elementId) {
        if (lastChart !== null) {
            lastChart.dispose()
        }
        $("#tipTitle").html('')
        let chart = echarts.init(document.getElementById(elementId));
        lastChart = chart
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: []
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: []
            }
            ,
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: []
        };

        chart.setOption(option);
        fillDataByURL(url, chart);
    }

    function lineChart() {
        let queryStr = buildQueryStr() + "&type=line";
        let url = '/lineMap' + queryStr
        lineChartApi(url, 'main')
    }

    function lineChartApi(url, elementId) {
        if (lastChart !== null) {
            lastChart.dispose()
        }
        $("#tipTitle").html('')

        let chart = echarts.init(document.getElementById(elementId));
        lastChart = chart
        let option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: []
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: []
            }],
            yAxis: [{
                type: 'value'
            }],
            series: []
        };

        chart.setOption(option);

        fillDataByURL(url, chart);
    }

    function heatmapChart() {
        if (lastChart !== null) {
            lastChart.dispose()
        }

        let queryStr = buildQueryStr();
        lastChart = heatmapChartApi(queryStr, 'main')
    }

    function heatmapChartApi(param, elementId) {
        let chart = echarts.init(document.getElementById(elementId));
        handleGet('/heatMap' + param, function (heatMap) {
            // weekday, hour, count
            let data = heatMap.data.data.map(function (item) {
                return [item[1], item[0], item[2] || '-'];
            });

            let title = heatMap.data.start + " ➡️ " + heatMap.data.end + " [" + heatMap.data.total + "]"
            let option = {
                title: {
                    text: title,
                    left: 'center',
                    align: 'right',
                },
                tooltip: {
                    position: 'top'
                },
                animation: false,
                grid: {
                    height: '70%',
                    top: '6%'
                },
                xAxis: {
                    type: 'category',
                    data: hours,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: days,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: heatMap.data.max,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [{
                    name: 'Hit Count',
                    type: 'heatmap',
                    data: data,
                    label: {
                        show: true
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            chart.setOption(option);
        });
        return chart
    }

    function syncDetails() {
        handleGet("/syncDetails", function (response) {
            alert('同步完成')
        }, function (data) {
            alert('连接失败' + data.responseText)
        });
    }

    function fillDataByURL(url, chart) {
        handleGet(url, function (response) {
            chart.setOption({
                xAxis: {
                    data: response.data.days
                },
                legend: {
                    data: response.data.keyNames
                },
                // series: appendSumLine(response.data.lines)
                series: response.data.lines
            });
        }, function (data) {
            alert('连接失败' + data.responseText)
        });
    }

    function appendSumLine(lines) {
        let sumData = []
        let first = lines[0];
        for (let i = 0; i < first.data.length; i++) {
            let temp = 0
            for (let j = 0; j < lines.length; j++) {
                temp += lines[j].data[i]
            }
            sumData.push(temp)
        }

        lines.push({ //新的一个柱子 注意不设stack
            name: '累计',
            type: 'bar',
            barGap: '-100%', // 左移100%，stack不再与上面两个同列
            label: {
                normal: {
                    show: true, //显示数值
                    position: 'top', //  位置设为top
                    formatter: '{c}',
                    textStyle: {color: '#213e53'} //设置数值颜色
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgba(128, 128, 128, 0)' // 设置背景颜色为透明
                }
            },
            data: sumData,
        })
        return lines
    }
</script>
</body>
</html>